<template>
    <div class="">
        <el-skeleton :loading="loading" animated :count="6">
            <template slot="template">
                <div style="padding: 14px" class="blog-skeleton">
                    <el-skeleton-item variant="h3" style="width: 30%" />
                    <div
                        style="
                            display: flex;
                            align-items: center;
                            justify-items: space-between;
                            margin-top: 36px;
                            height: 16px;
                        "
                    >
                        <el-skeleton-item
                            variant="text"
                            style="margin-right: 16px"
                        />
                        <el-skeleton-item
                            variant="text"
                            style="margin-right: 16px"
                        />
                        <el-skeleton-item variant="text" style="width: 30%" />
                    </div>
                    <div
                        style="
                            display: flex;
                            align-items: center;
                            justify-items: space-between;
                            margin-top: 16px;
                            height: 16px;
                        "
                    >
                        <el-skeleton-item
                            variant="text"
                            style="margin-right: 16px"
                        />
                        <el-skeleton-item
                            variant="text"
                            style="margin-right: 16px"
                        />
                        <el-skeleton-item variant="text" style="width: 70%" />
                    </div>
                    <div
                        style="
                            display: flex;
                            align-items: center;
                            justify-items: space-around;
                            margin-top: 16px;
                            height: 16px;
                        "
                    >
                        <el-skeleton-item
                            variant="text"
                            style="margin-right: 50%"
                        />
                    </div>
                </div>
            </template>

            <template> <slot name="body"></slot> </template>
        </el-skeleton>
    </div>
</template>
<script>
export default {
    props: {
        loading: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {}
    },
}
</script>
<style lang="less" scoped>
.blog-skeleton {
    padding: 20px !important;
    min-height: 200px;
    margin-bottom: 20px;
    border-radius: 6px;
    background-color: #fff;
    border: 1px solid #ebebeb;
    box-shadow: 0 1px 3px rgba(18, 18, 18, 0.1);
}
</style>
